<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/piano.css" type="text/css" />
		<link rel="stylesheet" href="css/letter.css" type="text/css" />
		<link rel="stylesheet" href="css/Introduction.css" type="text/css" />
	</head>
	<style type="text/css" >
	</style>
	<!-- 引入js文件 -->
	<script src="js/Introduction.js"></script>
	<script src="js/keyboard.js"></script>
	<body>
		<span id="htp" class="htp">how to play</span>
		<div id = "inf">
			<img class="pic" src="img/inf.png" >
				<span id="close" class="close">X</span>
			</img>
		</div>
		<div class="title">
			<span style="margin-left: 35vw;" class="letter" data-letter="P">P</span>
			<span class="letter" data-letter="I">I</span>
			<span class="letter" data-letter="A">A</span>
			<span class="letter" data-letter="N">N</span>
			<span class="letter" data-letter="O">O</span>
		</div>
		<!-- 琴键容器 -->
		<div id="main"></div>
		<!-- 上传文件 -->
		<div id="uploadFile">
			<span class="uploadText">上传曲谱，自动播放：</span>
			<input class="uploadText" id="fileUpload" type="file" />
			<button class="uploadText1" title="弹奏" type="button" id="readAsText">弹奏</button>
		</div>
	</body>
	<script type="text/javascript">
		var m = document.getElementById("main");
		var bk =[2,3,5,6,7];
		for(var i = 1; i < 53; i++){
			//创建元素
			var newNode = document.createElement("div");
			//添加元素
			newNode.id = "key" + i;
			newNode.className = "white";
			newNode.style.width = 100/52 + "vw";
			m.appendChild(newNode);
			if(i == 1){
				//创建元素
				var newNode = document.createElement("div");
				//添加元素
				newNode.id = "key" + 53;
				newNode.className = "black";
				newNode.style.left = 75/52 + "vw";
				newNode.style.width = 50/52 + "vw";
				m.appendChild(newNode);
			}
		}
		var bb = 54;
		for(i = 1;i < 8; i++){
			for(var j = 0; j < bk.length;j++){
				//创建元素
				var newNode = document.createElement("div");
				//添加元素
				newNode.id = "key" + bb;
				bb++;
				newNode.className = "black";
				newNode.style.left = ((bk[j]+(i-1)*7)*100/52+75/52) + "vw";
				newNode.style.width = 50/52 + "vw";
				m.appendChild(newNode);
			}
		}
		//导入文件
		var readAsText = document.getElementById("readAsText");
		readAsText.addEventListener('click',function(){
			showDataByText();
		},false)
		//读取文件数据
		function showDataByText(){
			var resultFile = document.getElementById("fileUpload").files[0];
			if(resultFile){
				var reader = new FileReader();
				//以GBK编码读取文件
				reader.readAsText(resultFile,'GBK');
				reader.onload = function(e){
					//获取文件名
					var a = document.getElementById("fileUpload").value;
					//截取文件后缀
					var atype = a.substring(a.length-3);
					//获取文件文本内容
					var urlData = this.result;
					//判断文件类型
					if(atype != "txt"){
						alert("请选择txt文件");
					}else{
						autoPlayMusic(urlData);
					}
				};
			}
		}
	</script>
</html>
